<template>
    <div>
        <el-select v-model="keyword" style="width:100%" filterable remote reserve-keyword :placeholder="placeholder"
            :remote-method="remoteMethod" :loading="loading" @change="changeSelect">
            <el-option v-for="item in companyOptions" :key="item.orgCode" :label="item.fullName + '('+item.orgCode+')'"
                :value="item.orgCode" />
        </el-select>
    </div>
</template>
<script>
import api from "@/api/index";
export default {
    name: 'companySearch',
    autoImport: true,
    props: {
        backValue: {
            type: String,
            default:""
        },
        placeholder: {
            type: String,
            default: "请输入公司编码/名称搜索"
        },
        interfaceInfo: {
            type: Object,
            default: () => {
                return {
                    fileName: 'dataMaintenance',
                    name: 'getOrgTreeList',
                    keyword:'orgCodeOrName'
                }
            }
        }
    },
    watch:{
        backValue(val) {
            this.keyword = val
        }
    },
    data() {
        return {
            loading: false,
            companyOptions: [],
            keyword:''
        }
    },
    methods: {
        remoteMethod(query) {
            console.log(query, 'orgCodeOrName')
            if (query) {
                this.loading = true
                setTimeout(() => {
                    this.loading = false
                    const params = { pageSize: 20, pageNum: 1 }
                  
                    const { fileName, name, keyword } = this.interfaceInfo
                    params[keyword] = query
                    api[fileName][name](params).then((res) => {
                        if (res) this.companyOptions = res.list || []
                       
                    })
                }, 200)
            } else {
                this.companyOptions = []
            }
        },
        changeSelect(value) {

            const res = this.companyOptions.find(item => item.orgCode === value)
            this.$emit('input', value)
             this.$emit('select', res)

        }
    }
}
</script>
